<template>
  <div id="JuriDiction">
    <!--使用公共头部区-->
    <c-header :classId4="className"></c-header>
    <!--权限设置内容区域-->
    <div class="juri-body">
      <div class="juri-header">
        <div class="hea-left">
          <span :class="{Eactive:isedit}" @click="showedit()">管理员</span> |
          <span :class="{Eactive:isedit1}" @click="showedit1()">角色</span>
          <button class="flo-right" v-if="isedit1" @click="handleAdd()">新增</button>
        </div>
      </div>
      <!--管理员区域一-->
      <div class="temb-content" v-if="edit">
        <div class="adin-header">
          <span class="ad-span1">组织架构</span>
          <div class="block">
            <el-cascader :options="options" v-model="selectedOptions">
            </el-cascader>
          </div>
          <span class="ad-span2">OA账号</span>
          <input type="text" v-model="adinNumber" />
          <span class="ad-span2">姓名</span>
          <input type="text" v-model="adinName" />
          <span class="ad-span3">角色</span>
          <el-select v-model="rolevalue" placeholder="请选择角色">
            <el-option v-for="roleitem in roleoptions" :key="roleitem.rolevalue" :label="roleitem.rolelabel" :value="roleitem.rolevalue">
							
            </el-option>
          </el-select>
          <button>查询</button>
          <span class="ad-span4">清除条件</span>
        </div>
        <div class="adin-batch">
        	<span>批量授权</span>
        </div>
        <div class="adin-body">
          <el-table :data="juritableData" border style="width: 100%" height="62vh">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="SerialNumber" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="phoneNuber" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="userName" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="role" label="角色" align="center">
            </el-table-column>
            <el-table-column prop="Remarks" label="备注" align="center">
            </el-table-column>
            <el-table-column prop="state" label="状态" align="center">
              <template slot-scope="scope">
                <span :class="scope.row.classId">{{scope.row.statename}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="260px">
              <template slot-scope="scope">
                <el-button @click="ismask=!ismask" type="text" size="small">修改</el-button>
                <el-button type="text" size="small">冻结</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--角色区域-->
      <div class="temb-content" v-else>
      	<el-table :data="juritableData1" border style="width: 100%" height="62vh">
	        <el-table-column prop="SerialNumber1" label="序号" align="center">
	        </el-table-column>
	        <el-table-column prop="RoleName" label="角色名称" align="center">
	        </el-table-column>
	        <el-table-column prop="adminBoolean" label="是否超级管理员" align="center">
	        </el-table-column>
	        <el-table-column prop="Remarks1" label="备注" align="center">
	        </el-table-column>
	        <el-table-column fixed="right" label="操作" align="center" width="260px">
	          <template slot-scope="scope">
	            <el-button @click="ismaskRole=!ismaskRole" type="text" size="small">修改</el-button>
	            <el-button type="text" size="small">删除</el-button>
	          </template>
	        </el-table-column>
	      </el-table>
      </div>
    </div>
    <!--管理员遮罩层区域-->
    <transition name="fade">
    <div class="hidden mask" v-if="ismask">
      <div class="admin-content">
				<div class="adcon-header">
					<span>新增/修改</span>
				</div>
				<div class="adcon-body">
					<div class="adbo-middle">
						<div class="adbom1">
							<span>OA账号:</span>
							<span>&nbsp;{{adinNumber}}</span>
						</div>
						<div class="adbom2">
							<span>真实姓名:</span>
							<input type="text" v-model="TrueName" />
						</div>
						<div class="adbom3">
							<span>手机号码:</span>
							<input type="text" v-model="adPhoneNumber" />
						</div>
						<div class="adbom4">
							<span class="adbo-span">角色:</span>
							<!--穿梭框-->
							<template>
							  <el-transfer :titles="['可选角色','可选角色']" v-model="shuttle" :data="data"></el-transfer>
							</template>
						</div>						
					</div>
				</div>
				<div class="adcon-footer">
					<div class="fleft">
						<button class="fbtn1" @click="ismask=!ismask">取消</button>
						<button class="fbtn2">确定</button>
					</div>
				</div>
        <!--关闭按钮-->
        <span class="close el-icon-close" @click="ismask=!ismask"></span>
      </div>
    </div>
    </transition>
    <!--修改角色遮罩层-->
    <transition name="fade">
    <div class="hiddenRole maskRole" v-if="ismaskRole">
      <div class="radmin-content">
				<div class="radcon-header">
					<span>角色信息</span>
				</div>
				<div class="radcon-body">
					<div class="radbo-middle">
						<div class="radbom1">
							<span>角色名称:</span>
							<input type="text" v-model="RoleName" />
						</div>
						<div class="radbom2">
							<span class="bom2span">超级管理员:</span>
							<el-radio v-model="Roleradio" label="1">是</el-radio>
  						<el-radio v-model="Roleradio" label="2">否</el-radio>
						</div>
						<div class="radbom3">
							<span>功能:</span>
							<span class="rad-span1">
								<el-tree :data="span1" show-checkbox node-key="id" :props="defaultProps"></el-tree>
							</span>
							<span class="rad-span2">
								<el-tree :data="span2" show-checkbox node-key="id" :props="defaultProps1"></el-tree>
							</span>
							<span class="rad-span3">
								<el-tree :data="span3" show-checkbox node-key="id" :props="defaultProps2"></el-tree>
							</span>
						</div>
						<div class="radbom4">
							<span class="radbo-span">备注:</span>							
							<textarea rows="6"></textarea>
						</div>						
					</div>
				</div>
				<div class="radcon-footer">
					<div class="fleft">
						<button class="fbtn1" @click="ismaskRole=!ismaskRole">取消</button>
						<button class="fbtn2">确定</button>
					</div>
				</div>
        <!--关闭按钮-->
        <span class="close el-icon-close" @click="ismaskRole=!ismaskRole"></span>
      </div>
    </div>
    </transition>
    <!--新增角色遮罩层-->
    <transition name="fade">
    <div class="hiddenAdd maskAdd" v-if="ismaskAdd">
      <div class="Aadmin-content">
				<div class="Aadcon-header">
					<span>角色信息</span>
				</div>
				<div class="Aadcon-body">
					<div class="Aadbo-middle">
						<div class="Aadbom1">
							<span>角色:</span>
							<input type="text" v-model="ARoleName" />
						</div>
						<div class="Aadbom2">
							<span class="Abom2span">超级管理员:</span>
							<el-radio v-model="Aradio" label="1">是</el-radio>
  						<el-radio v-model="Aradio" label="2">否</el-radio>
						</div>
						<div class="Aadbom4">
							<span class="Aadbo-span">备注:</span>							
							<textarea rows="6"></textarea>
						</div>						
					</div>
				</div>
				<div class="Aadcon-footer">
					<div class="fleft">
						<button class="fbtn1" @click="ismaskAdd=!ismaskAdd">取消</button>
						<button class="fbtn2">确定</button>
					</div>
				</div>
        <!--关闭按钮-->
        <span class="close el-icon-close" @click="ismaskAdd=!ismaskAdd"></span>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
	//导入公共头部组件
  import cHeader from '../common/quesHeader.vue';
  export default {
    data() {
    	//穿梭框数据
    	const generateData = () => {
        const data = [{
        	key: 1,
        	label: "超级管理员"
        },{
        	key: 2,
        	label: "其他用户"
        },{
        	key: 3,
        	label: "普通管理员"
        }]
        return data;
      };
      return {
      	data: generateData(),
        shuttle: [],
        className: 'active',
        edit: true,
        isedit: true,
        isedit1: false,
        adinNumber: 886889,
        adinName: '张三',
        TrueName: '王大帅',
        adPhoneNumber: 15920902345,
        RoleName: '超级管理员',
        ARoleName: '普通管理员',
        ismask: false,
        ismaskRole: false,
        ismaskAdd: false,
        Roleradio: '1',
        Aradio: '1',
        //角色下拉框数据
        roleoptions: [{
          rolevalue: '选项1',
          rolelabel: '超级管理员'
        }, {
          rolevalue: '选项2',
          rolelabel: '普通管理员'
        }, {
          rolevalue: '选项3',
          rolelabel: '未授权用户'
        }, {
          rolevalue: '选项4',
          rolelabel: '其他用户'
        }],
        rolevalue: '',
        //管理员表格内容数据
        juritableData: [{
          SerialNumber: 1,
          phoneNuber: 15920902323,
          userName: '张三',
          role: '超级管理员',
          Remarks: '厉害了哥',
          classId: 'normal',
          statename: '正常'
        }, {
          SerialNumber: 2,
          phoneNuber: 13920906623,
          userName: '李四',
          role: '其他用户',
          Remarks: '你只是打酱油的',
          classId: 'frozen',
          statename: '冻结'
        }, {
          SerialNumber: 3,
          phoneNuber: 12920906666,
          userName: '王五',
          role: '未授权用户',
          Remarks: '加油老铁',
          classId: 'error',
          statename: '未授权'
        }],
        //角色表格内容数据
        juritableData1: [{
          SerialNumber1: '01',
          RoleName: '超级管理员',
          adminBoolean: '是',
          Remarks1: '厉害了哥'
        }, {
          SerialNumber1: '02',
          RoleName: '其他用户',
          adminBoolean: '否',
          Remarks1: '你是打酱油的'
        }, {
          SerialNumber1: '03',
          RoleName: '超级管理员',
          adminBoolean: '是',
          Remarks1: '隔壁老王'
        }],
        //组织架构数据
        options: [{
          value: 'huanan',
          label: '华南区',
          children: [{
            value: 'laochengqu',
            label: '老城区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }, {
            value: 'chengnanqu',
            label: '城南区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }, {
            value: 'chengbeiqu',
            label: '城北区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'PS',
            label: 'PS课程'
          }, {
            value: 'UI',
            label: 'UI设计'
          }, {
            value: 'java',
            label: 'java程序',
            children: [{
              value: 'jichu',
              label: '基础'
            }, {
              value: 'jinjie',
              label: '进阶'
            }]
          }]
        }],
        selectedOptions: [],
        //角色遮罩层功能区域数据
        span1:[{
	    		id: 1,
	    		label: '我的问卷',
	    		children:[{
	    			id: 11,
	    			label: '删除'
	    		},{
	    			id: 12,
	    			label: '增加'
	    		}]
	    	}],
        defaultProps:{
        	children: 'children',
        	label: 'label'
        },
        span2:[{
	    		id: 2,
	    		label: '权限设置',
	    		children:[{
	    			id: 21,
	    			label: '删除'
	    		},{
	    			id: 22,
	    			label: '增加'
	    		},{
	    			id: 23,
	    			label: '查询'
	    		},{
	    			id: 24,
	    			label: '修改'
	    		}]
	    	}],
        defaultProps1:{
        	children: 'children',
        	label: 'label'
        },
        span3:[{
	    		id: 3,
	    		label: '登录设置',
	    		children:[{
	    			id: 31,
	    			label: 'get方式'
	    		},{
	    			id: 32,
	    			label: 'post方式'
	    		},{
	    			id: 33,
	    			label: '玄学登录'
	    		},{
	    			id: 34,
	    			label: '不需要'
	    		}]
	    	}],
        defaultProps2:{
        	children: 'children',
        	label: 'label'
        }
      }
    },
    methods: {
      showedit() {
        this.edit = true;
        this.isedit = true;
        this.isedit1 = false;
      },
      showedit1() {
        this.edit = false;
        this.isedit = false;
        this.isedit1 = true;
      },
      handleAdd(){
      	this.ismaskAdd = true;
      }
    },
    components: {
      "c-header": cHeader
    }
  }
</script>

<style scoped="scoped">
  #JuriDiction {
    min-width: 960px;
  }
  /*权限设置区域*/  
  .juri-body .juri-header {
    height: 55px;
    width: 100%;
    line-height: 55px;
    padding-left: 20px;
    padding-right: 30px;
    box-sizing: border-box;
    position: relative;
  }
  .juri-header .hea-left {
  	width: 100%;
  }
  .hea-left .flo-right{
  	float: right;
  	height: 25px;
  	width: 100px;
  	text-align: center;
  	background-color: #3A8EE6;
  	font-size: 14px;
  	margin-top: 15px;
  	border: none;
  	border-radius: 5px;
  	color: #fff;
  	outline: none;
  	cursor: pointer;
  }
  .juri-header span:hover {
    color: rgb(22, 155, 213);
    cursor: pointer;
  }
  /*管理员和角色切换样式*/  
  .Eactive {
    color: rgb(22, 155, 213);
  }
  .temb-content {
    border: 1px solid #ccc;
    height: 81vh;
    position: relative;
  }
  /*管理员区域*/ 
  .temb-content .adin-header {
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
  }
  .adin-header .block {
    margin-left: 5px;
    display: inline-block;
  }
  .adin-header .ad-span1, .ad-span2, .ad-span3 {
    margin-left: 12px;
    margin-right: 2px;
    font-size: 14px;
    color: #333;
  }
  .adin-header .el-select {
  	width: 130px;
  }
  .adin-header input {
    height: 26px;
    padding: 2px 12px;
    width: 10vw;
    border-radius: 5px;
    border: 1px solid #DCDFE6;
    outline: none;
    font-size: 14px;
    color: #333;
  }
  .adin-header .ad-span4{
  	margin-left: 5px;
  	color: #3A8EE6;
  	font-size: 14px;
  	cursor: pointer;
  }
  .adin-header .ad-span4:hover{
  	color: #8CC5FF;
  }
  .adin-header button {
    margin-left: 30px;
    height: 25px;
    line-height: 26px;
    border: none;
    background-color: rgb(22,155,213);
    border-radius: 5px;
    padding: 0 25px;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .adin-batch{
  	background-color: blanchedalmond;
  	padding-bottom: 5px;
  	padding-top: 5px;
  	padding-left: 25px;
  }
  .adin-batch span{
  	display: inline-block;
  	height: 25px;
  	width: 80px;
  	line-height: 25px;
  	text-align: center;
  	background-color: rgb(22,155,213);
  	border-radius: 5px;
  	color: #fff;
  	font-size: 12px;
  	cursor: pointer;
  }
  .el-table th {
    background-color: #ccc;
    border: none;
    color: #fff;
    font-weight: normal;
    font-size: 14px;
  }
  .normal, .frozen, .error {
    display: inline-block;
    color: #FFFFFF;
    height: 30px;
    line-height: 30px;
    width: 100px;
    border-radius: 5px;
  }
  .normal {
    background-color: rgb(22,155,213);
  }
  .frozen, .error {
    background-color: green;
  }
  /*管理员遮罩层*/ 
  .hidden {
    display: none;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99;
    display: block;
  }
  #JuriDiction .admin-content{
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	width: 70vw;
  	height: 80vh;
  	margin-left: -35vw;
  	margin-top: -40vh;
  	background-color: #fff;
  	overflow:auto;
  	position: relative;
  	border-radius: 5px;
  	box-sizing: border-box;
  }
  .admin-content .close{
  	position: absolute;
  	right: 10px;
  	top: 10px;
  	font-size: 25px;
  }
  .admin-content .close:hover{
  	color: rgba(255,0,0,.6);
    cursor: pointer;
    transition: color .2s ease-in;
  }
  .admin-content .adcon-header{
  	border-bottom: 1px solid #ccc;
  	height: 50px;
  	line-height: 50px;
  }
  .admin-content .adcon-header span{
  	margin-left: 15px;
  }
  .adcon-body .adbo-middle{
  	width: 60%;
  	height: 62vh;
  	margin: 8px auto;
  	font-size: 14px;
  	overflow: auto;
  }
  .adbo-middle .adbom1{
  	padding-left: 8px;
  }
  .adbo-middle .adbom2{
  	margin-top: 5px;
  }
  .adbo-middle .adbom2 input[type="text"],
  .adbo-middle .adbom3 input[type="text"]{
  	width: 60%;
  	padding: 1px 5px;
  	border-radius: 5px;
  	border: 1px solid #DCDFE6;
  	margin-left: 5px;
  	outline: none;
  	height: 28px;
  	line-height: 28px;
  }
  .adbo-middle .adbom3{
  	margin-top: 5px;
  }
  .adbo-middle .adbom4{
  	padding-left: 28px;
  }
  .adbo-middle .adbom4 .adbo-span{
  	display: inline-block;
  	vertical-align: top;
  }
  .adbo-middle .adbom4 .el-transfer {
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
	}
  .admin-content .adcon-footer{
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	height: 45px;
  	line-height: 45px;
  	width: 100%;
  	border-top: 1px solid #ccc;
  }
  .adcon-footer .fleft{
  	float: right;
  	margin-right: 20px;
  }
  .adcon-footer .fleft button{
  	height: 30px;
  	line-height: 30px;
  	padding: 2px 40px;
  	outline: none;
  	border-radius: 5px;
  }
  .fleft .fbtn1{
  	background-color: #fff;
  	margin-right: 5px;
  	border: 1px solid black;
  	cursor: pointer;
  }
  .fleft .fbtn2{
  	background-color: #3A8EE6;
  	border: none;
  	cursor: pointer;
  	color: #fff;
  }  
  /*修改角色遮罩层*/ 
  .hiddenRole {
    display: none;
  }
  .maskRole {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99;
    display: block;
  }
  #JuriDiction .radmin-content{
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	width: 70vw;
  	height: 80vh;
  	margin-left: -35vw;
  	margin-top: -40vh;
  	background-color: #fff;
  	overflow:auto;
  	border-radius: 5px;
  }
  .radmin-content .close{
  	position: absolute;
  	right: 10px;
  	top: 10px;
  	font-size: 25px;
  }
  .radmin-content .close:hover{
  	color: rgba(255,0,0,.6);
    cursor: pointer;
    transition: color .2s ease-in;
  }
  .radmin-content .radcon-header{
  	border-bottom: 1px solid #ccc;
  	height: 50px;
  	line-height: 50px;
  }
  .radmin-content .radcon-header span{
  	margin-left: 15px;
  }
  .radcon-body .radbo-middle{
  	width: 45vw;
  	height: 61vh;
  	margin: 8px auto;
  	overflow: auto;
  	margin-top: 15px;
  }
  .radbo-middle .radbom1{
  	padding-left: 17px;
  }
  .radbo-middle .radbom1 input{
  	height: 30px;
  	line-height: 30px;
  	padding: 0 8px;
  	outline: none;
  	width: 150px;
  	box-sizing: border-box;
  	border: 1px solid #DCDFE6;
  	border-radius: 5px;
  	font-size: 15px;
  }
  .radbo-middle .radbom2{
  	margin-top: 10px;
  }
  .radbom2 .bom2span{
  	margin-right: 15px;
  }
  .radbo-middle .radbom3{
  	margin-top: 10px;
  	padding-left: 47px;
  	height: 30px;
  }
  .radbom3 .rad-span1{
  	padding: 1px 0;
  	width: 150px;
  	border: 1px solid #DCDFE6;
  	display: inline-block;
  	vertical-align: top;
  	border-radius: 5px;
  }
  .radbom3 .rad-span2{
  	padding: 1px 0;
  	width: 150px;
  	border: 1px solid #DCDFE6;
  	display: inline-block;
  	vertical-align: top;
  	margin-left: 10px;
  	border-radius: 5px;
  }
  .radbom3 .rad-span3{
  	padding: 1px 0;
  	width: 150px;
  	border: 1px solid #DCDFE6;
  	display: inline-block;
  	vertical-align: top;
  	margin-left: 10px;
  	border-radius: 5px;
  }
  .radbo-middle .radbom4{
  	padding-left: 47px;
  	margin-top: 30px;
  }
  .radbom4 textarea{
  	width: 464px;
  	padding: 5px 10px;
  	resize: none;
  	border: 1px solid #DCDFE6;
  	outline: none;
  	border-radius: 5px;
  }
  .radbo-middle .radbom4 .radbo-span{
  	display: inline-block;
  	vertical-align: top;
  }
  .radmin-content .radcon-footer{
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	height: 45px;
  	line-height: 45px;
  	width: 100%;
  	border-top: 1px solid #ccc;
  }
  .radcon-footer .fleft{
  	float: right;
  	margin-right: 20px;
  }
  .radcon-footer .fleft button{
  	height: 30px;
  	line-height: 30px;
  	padding: 2px 40px;
  	outline: none;
  	border-radius: 5px;
  }
  .fleft .fbtn1{
  	background-color: #fff;
  	margin-right: 5px;
  	border: 1px solid #ccc;
  	cursor: pointer;
  }
  .fleft .fbtn2{
  	background-color: #3A8EE6;
  	border: none;
  	cursor: pointer;
  	color: #fff;
  }
  /*新增角色遮罩层*/  
  .hiddenAdd {
    display: none;
  }
  .maskAdd {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99;
    display: block;
  }
  #JuriDiction .Aadmin-content{
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	width: 70vw;
  	height: 80vh;
  	margin-left: -35vw;
  	margin-top: -40vh;
  	background-color: #fff;
  	overflow:auto;
  	border-radius: 5px;
  }
  .Aadmin-content .close{
  	position: absolute;
  	right: 10px;
  	top: 10px;
  	font-size: 25px;
  }
  .Aadmin-content .close:hover{
  	color: rgba(255,0,0,.6);
    cursor: pointer;
    transition: color .2s ease-in;
  }
  .Aadmin-content .Aadcon-header{
  	border-bottom: 1px solid #ccc;
  	height: 50px;
  	line-height: 50px;
  }
  .Aadmin-content .Aadcon-header span{
  	margin-left: 15px;
  }
  .Aadcon-body .Aadbo-middle{
  	width: 45vw;
  	height: 61vh;
  	margin: 20px auto 0px;
  	overflow: auto;
  }
  .Aadbo-middle .Aadbom1{
  	padding-left: 47px;
  }
  .Aadbo-middle .Aadbom1 input{
  	height: 30px;
  	line-height: 30px;
  	padding: 0 8px;
  	outline: none;
  	width: 150px;
  	box-sizing: border-box;
  	border: 1px solid #DCDFE6;
  	font-size: 15;
  	border-radius: 5px;
  }
  .Aadbo-middle .Aadbom2{
  	margin-top: 10px;
  }
  .Aadbom2 .Abom2span{
  	margin-right: 15px;
  }
  .Aadbo-middle .Aadbom4{
  	padding-left: 46px;
  	margin-top: 30px;
  }
  .Aadbom4 textarea{
  	width: 368px;
  	padding: 5px 10px;
  	resize: none;
  	border: 1px solid #DCDFE6;
  	border-radius: 5px;
  	outline: none;
  }
  .Aadbo-middle .Aadbom4 .Aadbo-span{
  	display: inline-block;
  	vertical-align: top;
  }
  .Aadmin-content .Aadcon-footer{
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	height: 45px;
  	line-height: 45px;
  	width: 100%;
  	border-top: 1px solid #ccc;
  }
  .Aadcon-footer .fleft{
  	float: right;
  	margin-right: 20px;
  }
  .Aadcon-footer .fleft button{
  	height: 30px;
  	line-height: 30px;
  	padding: 2px 40px;
  	outline: none;
  	border-radius: 5px;
  }
  .fleft .fbtn1{
  	background-color: #fff;
  	margin-right: 5px;
  	border: 1px solid #ccc;
  	cursor: pointer;
  }
  .fleft .fbtn2{
  	background-color: #3A8EE6;
  	border: none;
  	cursor: pointer;
  	color: #fff;
  }
  /*遮罩层统一动画*/
	.fade-enter {
		opacity: 0;
	}
	.fade-enter-active {
		transition: opacity 1s;
	}
	.fade-leave-to {
		opacity: 0;
	}
	.fade-leave-active {
		transition: opacity 1s;
	}
</style>